<!--  宣传页面首页  -->
<template>
	<el-container style="padding: 0 80px;">

		<el-header>
			<img src="../../../imgs/logo.png" style="width: 140px; height: 55px;" />
			<!-- <el-image style="width: 200px; height: 80px;" :src="urllogo" :fit="fit"></el-image> -->
			<!-- 花品主义宣传网站 -->
			<el-breadcrumb class="title_sub_text" separator-class="el-icon-arrow-right" style="display: inline-block;">

				<ul>
					<li><a class="navitem" href="javascript:;" 
						v-on:click="clickToTargetPage(0)">首页<p>Home</p></a></li>
					<li><a class="navitem" href="javascript:;" 
						v-on:click="clickToTargetPage(1)">动态<p>Activity</p></a></li>
					<li><a class="navitem" href="javascript:;" 
						v-on:click="clickToTargetPage(2)">加入我们<p>Join US</p></a></li>
				</ul>
			</el-breadcrumb>

		</el-header>

		<el-main style="height: 748px;margin:30px 0 ;">

			<!--  显示滚动效果  顶级作品宣传  -->
			<mu-carousel id="hotWorkers" hide-controls style="height:748px;">
				<mu-carousel-item v-for="item in urlListArr" :key="item">
					<el-image style="height:100%;width: 100%;" :src="item" fit="none" lazy></el-image>
				</mu-carousel-item>
			</mu-carousel>

			<!--  作品宣传网页  -->
			<el-carousel id="workersList" type="card" height="748px" style="margin-top: 100px;">
				<el-carousel-item v-for="item in urlHotArr" :key="item">
					<el-image style="width: 100%; height: 100%;" :src="item" fit="cover"></el-image>
				</el-carousel-item>
			</el-carousel>

			<!--  人员介绍栏位  -->
			<el-row id="contracts" style="margin-top: 90px;height:748px;padding-top: 50px;">
				<el-col :span="8" style="text-align:right;">
					<el-image style="width: 350px; height: 530px;" :src="url" :fit="fit"></el-image>
				</el-col>
				<el-col :span="16" style="padding: 30px 100px;">
					<div style="font-family: PingFang SC;font-size: 20px;font-weight: bold;color: #333333;">xxxx</div>
					<div style=" font-size: 14px;margin-top: 10px;color: #999999;">产品总监</div>
					<div style=" font-size: 14px;margin-top: 20px;color: #999999;">理念是xxxxxxx，概念是cccccccccccc，喜欢sssssssssss，动不动就wwwwwwwwwwww</div>
				</el-col>
			</el-row>

			<!--  网站详细信息  -->
			<div id="crotractUs" style="margin-top: 20px;height:748px;padding-top: 40px;">

				<div id="consulttop">
					<img style="width: 1300px; height: 160px;" src="../../../imgs/b1.jpg" fit="cover"></img>
				</div>

				<el-row>
					<el-col :span="5" style="text-align:left;">
						<!-- 联系我们-->
						<div class="title">
							<p>联系地址</p>
							<p>北京市</p>
						</div>
						<div class="post">
							<p>联系人</p>
							<p>xx女士</p>
						</div>
						<div class="post">
							<p>联系电话：</p>
							<p>15000000000</p><br />
							<!-- <p><a target="_blank" class="location hide" href="http://j.map.baidu.com/Kp2B3">查看地图</a></p> -->
						</div>
					</el-col>
					<el-col :span="5" style="text-align:left;">
						<!-- 备案信息-->
						<div class="title">
							<p>公司主体</p>
							<p>北京清风尚花艺设计有限公司</p>
						</div>
						<div class="post">
							<p>备案号：</p>
							<p>京ICP备19028871号</p><br />
							<!-- <p><a target="_blank" class="location hide" href="http://j.map.baidu.com/Kp2B3">查看地图</a></p> -->
						</div>

					</el-col>
					<el-col :span="14" style="padding: 30px 100px;">

					</el-col>
				</el-row>
			</div>

		</el-main>

		<el-footer id="footer" >
			<!-- 联系我们-->
			<div>
				<a class="navitem" href="javascript:;" 
						v-on:click="clickToTargetPage(2)">加入我们</a>
				<span class="line">|</span>
				<a href="/" class="navitem" data-page="partners">合作伙伴</a>
				<!-- <span class="line">|</span>
				客服热线：<b>4008-500-521</b>
				<a href="http://weibo.com/lgplanning" target="_blank" class="flink fwb"></a> -->
				<!-- <a href="javascript:;" class="flink fwx">
					<img src="images/qcode.jpg" width="360" height="180" /></a><a href="mailto:chenmin@loveniwed.com" class="flink femail"></a></div>
 -->
 </div>
		</el-footer>

	</el-container>
</template>

<script>
	// let mobel=require("../../util/device.js")
	// import animeIn from '../../assets/anime.js'
	export default {
		data() {
			return {
				fit: 'fill',
				idTargetArr: ["hotWorkers", "workersList", "contracts", "crotractUs"],
				currentId: 0,
				urlHotArr: [require("../../../imgs/icon_20200116094258.jpg"),
					require("../../../imgs/icon_20200116094332.jpg"),
					require("../../../imgs/icon_20200116094336.jpg"),
					require("../../../imgs/icon_20200116094339.jpg"),
				],
				urlListArr: [require("../../../imgs/icon_20200116094341.jpg"),
					require("../../../imgs/icon_20200116094344.jpg"),
					require("../../../imgs/icon_20200116094336.jpg"),
					require("../../../imgs/icon_20200116094347.jpg"),
				],
				urllogo: "../../../imgs/logo.png",
				url2: "https://muse-ui.org/img/carousel4.2a7cbfca.jpg",
				url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
			}
		},
		methods: {
			//切换栏目
			changeSel(id) {
				console.log("目标index:" + id)
				var tarID = "#" + this.idTargetArr[id];
				var tarWeight = document.querySelector(tarID);
				if (tarWeight != null) {
					tarWeight.scrollIntoView({
						behavior: 'smooth'
					});
				}
				// window.location.href="#"+this.idTargetArr[id];
			},

			//函数防抖
			debounce(func, wait) {
				let timeout;
				return function() {
					let context = this;
					let args = arguments;
					if (timeout) clearTimeout(timeout);
					timeout = setTimeout(() => {
						func.apply(context, args)
					}, wait);
				}
			},
			//判断滚动方向
			handleScroll(e) {
				let direction = e.deltaY > 0 ? 'down' : 'up'
				if (direction == 'down') {
					//下滑
					if (this.currentId < 1) {
						this.currentId++;
					} else if (this.currentId >= this.idTargetArr.length - 1) {
						this.currentId = this.idTargetArr.length - 1;
					} else {
						this.currentId++;
					}
				} else {
					//上滑
					if (this.currentId < 1) {
						this.currentId = 0;
					} else if (this.currentId > this.idTargetArr.length - 1) {
						this.currentId = this.idTargetArr.length - 1;
					} else {
						this.currentId--;
					}
				}
				this.changeSel(this.currentId);
			},
			//点击到指定的page页
			clickToTargetPage(id) {
						this.currentId=id; 
				this.changeSel(this.currentId);
			},
			

		},
		mounted() {

			var boo=this.$deviceUtil._isMobile();
			// var boo=mobel._isMobile();
			console.log("是否移动端:"+(boo!=null))
			if(boo != null){
				this.$router.push({path: "/index/mobile", query: {id: 0}})
			}else{
				//监听鼠标滚动事件
				window.addEventListener('mousewheel',
					this.debounce(this.handleScroll, 300), true) || window.addEventListener(
					"DOMMouseScroll", this.debounce(this.handleScroll, 300), false)
			}
		},
	}
</script>

<style scoped="scoped">
	Html,
	.el-main {
		overflow: hidden;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.title_sub_text {
		font-family: PingFang SC;
		font-size: 18px;
		line-height: 1.5;
	}

	.el-header ul {
		display: inline-block;
	}

	.el-header ul li {
		padding: 0 50px;
		width: auto;
		height: 30px;
		border-right: #e5e5e5 1px solid;
		list-style-type: none;
		float: left
	}

	.el-header ul li a {
		color: #666666;
		font-size: 15px;
		transition: all ease-out .3s;
		line-height: 12px;
	}

	.el-header ul li a p {
		padding: 0;
		margin: 0;
		font-size: 12px;
		font-family: "heliosextthinregular";
	}

	.el-header ul li a.active,
	.el-header ul li a:hover {
		color: #000
	}

	.el-header ul li:last-child {
		border: none
	}

	.title {
		color: #4c4c4c;
		font-size: 14px
	}

	.title .post {
		margin-top: 45px;
		line-height: 24px
	}

	#consulttop {
		width: 100%;
		height: 160px;
		background: #f5f5f5 no-repeat;
		margin-top: 80px
	}

	.title {
		line-height: 15px;
		margin-top: 40px;
	}

	.title p {
		color: #4c4c4c;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.title p:nth-of-type(2) {
		color: #999999;
		font-family: "heliosextthinregular";
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
	}

	.post {
		line-height: 15px;
		margin-top: 80px;
	}

	.post p {
		color: #4c4c4c;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.post p:nth-of-type(2) {
		color: #999999;
		font-family: "heliosextthinregular";
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
	}

	#footer {
		height: 20px;
		line-height: 20px;
		padding: 20px 0;
		position: fixed;
		bottom: 0px;
		width: 100%;
		left: 0px;
	}

	#footer div {
		float: right;
		padding-right: 260px;
		padding-bottom: 30px;
	}
	
	#footer div span.line {
		color: #a9a9a9;
		margin: 0 10px
	}
	#footer div .navitem {
		color: #a9a9a9
	}
	
	#footer div .navitem.active,
	#footer div .navitem:hover {
		color: #000
	}
</style>

<!--  介绍栏位  -->
<!-- <el-row>
				<el-col :span="16" style="text-align:center;line-height: 200px;">
					<span class="grid-content bg-purple-light">我们的产品都有什么？</span>
				</el-col>
				<el-col :span="8" style="text-align:center;">
					<el-image style="width: 200px; height: 200px;" :src="url" :fit="fit"></el-image>
				</el-col>
			</el-row> -->

<!--  导师说明  -->
<!-- <el-row style="text-align:center; ">
				<div style="display: inline-block;margin-right: 20px;">
					<el-image style="width: 100px; height: 100px;" :src="url" :fit="fit"></el-image>
					<br />
					<span>
						导师：是某某
					</span>
				</div>
				<div style="display: inline-block;margin-right: 20px;">
					<el-image style="width: 100px; height: 100px;" :src="url" :fit="fit"></el-image>
					<br />
					<span>
						导师：是某某
					</span>
				</div>
			</el-row> -->

<!-- 学员评价，或者其他人评价之类的 -->
<!-- <el-row style="text-align:center;margin-top: 50px;">
				<span>某某说：我们老师是最棒的！</span>
				<br />
				<span>某某说：我们老师是最棒的！</span>
				<br />
				<span>某某说：我们老师是最棒的！</span>
			</el-row> -->
